<div class="row-fluid">
  <div class="span4">
    <form class="input-append">
      <h6>Add Column</h6>
      <input bs-typeahead="fields.list" type="text" class="input-small" ng-model='newfield'>
      <button class="btn" ng-click="toggle_field(newfield);newfield=''"><i class="icon-plus"></i></button>
    </form>
  </div>
  <div class="span8">
    <h6>Columns <small>Click to remove</small></h6>
    <span style="margin-left:3px" ng-click="toggle_field(field)" ng-repeat="field in $parent.panel.fields" class="label pointer remove">{{field}} </span>
  </div>
</div>
<!-- 
  <div class="row-fluid">
    <div class="span4">
      <form class="input-append">
        <h6>Add field</h6>
        <input bs-typeahead="fields.list" type="text" class="input-small" ng-model='newhighlight' ng-change="set_refresh(true)">
        <button class="btn" ng-click="toggle_highlight(newhighlight);newhighlight=''"><i class="icon-plus"></i></button>
      </form>
    </div>
    <div class="span8">
      <h6>Highlighted fields <small>Click to remove</small></h6>
      <span style="margin-left:3px" ng-click="toggle_highlight(field);set_refresh(true)" ng-repeat="field in $parent.panel.highlight" class="label remove pointer">{{field}} </span>
    </div>
  </div>
-->
<h5>Options</h5>
<div class="row-fluid">
  <div class="span1">
    <h6>Header</h6><input type="checkbox" ng-model="panel.header" ng-checked="panel.header">
  </div>
  <div class="span1">
    <h6>Sorting</h6><input type="checkbox" ng-model="panel.sortable" ng-checked="panel.sortable" ng-change="get_data();">
  </div>
  <div class="span3" style="white-space:nowrap" ng-show="panel.sortable">
    <h6>Sort</h6>
    <input ng-show="all_fields.length<=0 || !all_fields"style="width:85%" ng-model="panel.sort[0]" ng-change="set_refresh(true)" bs-typeahead="fields.list" type="text"></input>
    <select ng-show="all_fields.length>0"style="width:85%" ng-model="panel.sort[0]" ng-change="set_refresh(true)" ng-options="f for f in all_fields"></select>
    <i ng-click="set_sort(panel.sort[0])" ng-class="{'icon-chevron-up': panel.sort[1] == 'asc','icon-chevron-down': panel.sort[1] == 'desc'}"></i>
  </div>
  <div class="span2">
    <h6>Font Size</h6>
    <select class="input-small" ng-model="panel.style['font-size']" ng-options="f for f in ['7pt','8pt','9pt','10pt','12pt','14pt','16pt','18pt','20pt','24pt','28pt','32pt','36pt','42pt','48pt','52pt','60pt','72pt']"></select></span>
  </div>
  <div class="span2">
    <h6>Trim Factor <tip>Trim fields to this long divided by # of rows</tip></h6>
    <input type="number" class="input-small" ng-model="panel.trimFactor">
  </div>    
</div>

<div class="row-fluid">
  <div class="span3">
    <h6>Add Hyperlink Column <tip>Add a column that will contain hyperlinks to access another resources such as URLs.</tip></h6>
    <input type="checkbox" ng-model="panel.enableHyperlink" ng-checked="panel.enableHyperlink">
  </div>
  <div class="span3" ng-show="panel.enableHyperlink">
    <h6>Link Column Header</h6>
    <input type="text" class="input-small" placeholder="Link" ng-model="panel.hyperlinkColumnHeader">
  </div>
  <div class="span3" ng-show="panel.enableHyperlink">
    <h6>Display Links as Icons</h6>
    <input type="checkbox" ng-model="panel.displayLinkIcon" ng-checked="panel.displayLinkIcon">
  </div>
  <div class="span3" ng-show="panel.enableHyperlink">
    <h6>Column for Links</h6>
    <input type="text" class="input-small" ng-model="panel.hyperlinkColumnForURI" bs-typeahead="fields.list">
  </div>
</div>

<div class="row-fluid">
  <div class="span3">
    <h6>Display Images <tip>Display images in column(s) that contain URLs to images.</tip></h6>
    <input type="checkbox" ng-model="panel.enableImageField" ng-checked="panel.enableImageField">
  </div>
  <div class="span4" ng-show="panel.enableImageField">
    <h6>Image Field(s) <tip>Comma separated list of fields that contain image URL.</tip></h6>
    <input type="text" class="input-large" bs-typeahead="fields.list" ng-model="panel.imageFields" ng-change="set_refresh(true)" ng-list>
  </div>
  <div class="span2" ng-show="panel.enableImageField">
    <h6>Image Width <tip>For examples: auto, 85px, or 50%</tip></h6>
    <input type="text" class="input-small" placeholder="e.g. auto, 85px, 50%" ng-model="panel.imgFieldWidth">
  </div>
  <div class="span2" ng-show="panel.enableImageField">
    <h6>Image Height <tip>For examples: auto, 85px, or 50%</tip></h6>
    <input type="text" class="input-small" placeholder="e.g. auto, 85px, 50%" ng-model="panel.imgFieldHeight">
  </div>
</div>

<div class="row-fluid">
  <h5>Real-time (Auto-refresh)</h5>  
  <div class="span1">
    <label class="small">Enable</label><input type="checkbox" ng-model="panel.refresh.enable" ng-checked="panel.refresh.enable">
  </div>
  <div class="span2">
    <label class="small">Interval (seconds) <tip>The minimum value is 2.</tip></label>
    <input type="number" min="2" class="input-mini" ng-model="panel.refresh.interval">
  </div>
</div>

<!-- <div class="row-fluid">
  <div class="span3" ng-show="panel.enableHyperlink && !panel.displayLinkIcon">
    <h6>Column for Link Text</h6>
    <input type="text" class="input-small" ng-model="panel.hyperlinkColumnForText" bs-typeahead="fields.list">
  </div>
  <div class="span3" ng-show="panel.enableHyperlink && !panel.displayLinkIcon">
    <h6>Column for Links</h6>
    <input type="text" class="input-small" ng-model="panel.hyperlinkColumnForURI" bs-typeahead="fields.list">
  </div>
</div> -->
